<template>
  <div ref="roleAdd">
    <!-- <Modal
      v-model="role.roleAddModalSta"
      title="新增角色"
      :loading="loading"
      :closable="false"
      @on-ok="roleAddOk"
      @on-cancel="roleCancel"
    >
      <Row>
        <XCol :span="20">
          <Form
            ref="roleAddForm"
            :model="roleAddForm"
            :rules="roleAddRule"
            label-position="right"
            :label-width="100"
          >
            <FormItem label="角色名:" prop="name">
              <XInput
                v-model="roleAddForm.name"
                placeholder="请输入角色名"
              ></XInput>
            </FormItem>
          </Form>
        </XCol>
      </Row>
    </Modal> -->
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "RoleAdd",
  data() {
    return {
      loading: true,
      //表单
      roleAddForm: {
        name: ""
      },
      //规则
      roleAddRule: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState({
      role: state => state.role //角色列表数据
    })
  },
  methods: {
    ...mapMutations([
      "roleAddModalMut", //新增角色模态框状态
      "roleAddMut" //把新角色添加到角色列表
    ]),
    //提交
    roleAddOk() {
      let _self = this;
      this.$refs["roleAddForm"].validate(valid => {
        if (valid) {
          setTimeout(() => {
            let obj = this.$qs.stringify({
              name: this.roleAddForm.name
            });
            //根据用户id获取用户角色
            this.$axios.post("/acl_role/addRole", obj).then(res => {
              _self.roleAddMut({
                state: res.data
              }); //把新增数据追加到角色列表里面
              _self.roleAddModalMut({
                state: false
              }); //关闭模态框
              this.$refs["roleAddForm"].resetFields(); //清空表单
              _self.$Message.success("新增角色成功"); //提示信息
            });
          }, 1000);
        } else {
          //动画
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
          });
        }
      });
    },
    //取消
    roleCancel() {
      this.$refs["roleAddForm"].resetFields();
    }
  },
  components: {}
};
</script>
